<%--
  Created by IntelliJ IDEA.
  User: leonardo
  Date: 2020/6/5
  Time: 4:51 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <c:set var="request" value="${pageContext.request.contextPath}"/>
    <title>layuiAdmin 文章管理 iframe 框</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${request}/static/plugins/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${request}/static/plugins/layuiadmin/style/admin.css" media="all">

</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list"
     style="padding-top: 20px">

    <div class="layui-form-item">
        <label class="layui-form-label">员工编号</label>
        <div class="layui-input-inline">
            <input type="text" name="id" id="id" autocomplete="off" disabled class="layui-input" lay-verify="name">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">员工姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="name" id="name" autocomplete="off" disabled class="layui-input" lay-verify="name">

        </div>

        <div class="layui-input-inline" style="width: 100px; float: right">
            <button type="button" id="addPunish" class="layui-btn layui-btn-primary">添加惩罚</button>
        </div>

        <div class="layui-input-inline" style="width: 100px; float: right">
            <button type="button" id="addAward" class="layui-btn layui-btn-primary">添加奖励</button>
        </div>
    </div>


    <table id="recordList" lay-filter="LAY-app-content-comm"></table>
    <script type="text/html" id="table-content-list1">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                class="layui-icon layui-icon-delete"></i>删除</a>
    </script>

    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit"
               value="确认编辑">
    </div>
</div>

<script src="${request}/static/plugins/layuiadmin/layui/layui.js"></script>
<script src="${request}/static/custom/js/myLayVerify.js"></script>
<script src="${request}/static/custom/js/myValidity.js"></script>
<script>
    layui.config({
        base: '${request}/static/plugins/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'laydate'], function () {
        var $ = layui.$
            , form = layui.form
            , laydate = layui.laydate
            , table = layui.table;

        let id = document.getElementById("id").value

        //方法级渲染
        table.render({
            elem: '#recordList'
            , url: '${request}/salary/records.html?id=' + id //向后端默认传page和limit
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'type', title: '奖惩'}
                , {field: 'date', title: '创建时间'}
                , {field: 'money', title: '金额'}
                , {field: 'reason', title: '原因'}
                , {title: '操作', minWidth: 150, align: 'center', fixed: 'right', toolbar: '#table-content-list1'}
            ]]
            , page: true
            , limit: 10
            , limits: [5, 10, 15, 20]
            , id: 'recordList'
            , request: {
                pageName: 'pageNum',
                limitName: 'pageSize'  //如不配置，默认为page=1&limit=10
            }
            , done: function (res, curr, count) {

            }

        });

        //监听工具条
        table.on('tool(LAY-app-content-comm)', function (obj) {
            var data = obj.data;

            if (obj.event === 'del') {
                layer.confirm('确定删除这条记录吗？', function (index) {
                    //提交删除ajax
                    $.ajax({
                        data: {
                            id: data.id,
                            empId:data.empId,
                            type:data.type,
                            money:data.money
                        },
                        type: 'post',
                        url: "${request}/salary/delSalaryRecord.html",
                        success: function (data) {
                            if (data.code == 100) {
                                layer.close(index); //关闭弹层
                                layer.msg('删除成功', {
                                    icon: 1
                                    , time: 1000
                                });
                                setTimeout(() => location.reload(), 800)
                            } else {
                                return layer.msg('未知错误');
                            }
                        }
                    });
                });
            }
        });


        document.getElementById("addAward").addEventListener('click', function () {
            layer.open({
                type: 1,
                title: '添加奖励信息',
                content: $('#iframe'),
                btn: ['确定', '取消'],
                yes: function (index, layero) {

                    //监听提交
                    var json = {
                        empId: $('#id').val()
                        , money: $('#money').val()
                        , reason: $('#reason').val()
                        , type: '奖励'
                    };

                    $.ajax({
                        data: json,
                        type: 'post',
                        url: "${request}/salary/addRecord.html",
                        success: function (data) {
                            if (data.code == 100) {
                                layer.close(index); //关闭弹层
                                layer.msg('添加成功', {
                                    icon: 1
                                    , time: 1000
                                });

                                setTimeout(() => location.reload(), 800)
                            } else {
                                return layer.msg('未知错误');
                            }
                        }
                    });

                    submit.trigger('click');
                }

            });
        })
        document.getElementById("addPunish").addEventListener('click', function () {
            layer.open({
                type: 1,
                title: '添加惩罚信息',
                content: $('#iframe'),
                btn: ['确定', '取消'],
                yes: function (index, layero) {

                    //监听提交
                    var json = {
                        empId: $('#id').val()
                        , money: $('#money').val()
                        , reason: $('#reason').val()
                        , type: '惩罚'
                    };

                    $.ajax({
                        data: json,
                        type: 'post',
                        url: "${request}/salary/addRecord.html",
                        success: function (data) {
                            if (data.code == 100) {
                                layer.close(index); //关闭弹层
                                layer.msg('添加成功', {
                                    icon: 1
                                    , time: 1000
                                });

                                setTimeout(() => location.reload(), 800)
                            } else {
                                return layer.msg('未知错误');
                            }
                        }
                    });

                    submit.trigger('click');
                }

            });
        })


    })
</script>

</body>
</html>
<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="iframe"
     style="padding: 20px 30px 0 0; display: none">

    <div class="layui-form-item">
        <label class="layui-form-label">金额</label>
        <div class="layui-input-inline">
            <input type="text" id="money" name="money" autocomplete="off" class="layui-input" lay-verify="name">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">原因</label>
        <div class="layui-input-inline">
            <textarea name="reason" id="reason" placeholder="请输入原因" class="layui-textarea" lay-verify="name"></textarea>
        </div>
    </div>
</div>


